<script setup>
import { ref, watchEffect } from 'vue'
import { equipmentType, batchAddInventory } from '../../api/api'
import { ElMessage } from 'element-plus'
const formLabelWidth = '100px'
let props = defineProps({
    PidialogFormVisible: Boolean,
    changeType: String
})
let emits = defineEmits(["closepi"])
function colseclose(formRef) {
    emits("closepi")
    formDataList.value = [
        {
            equipmentName: '',
            equipmentNumber: '',
            equipmentModel: '',
            equipmentType: '',
            inventoryStatus: ''
        }
    ]
    // closedialog(formRef)
    // if(props.dialogFormVisible){
    // roleOptions.value =[]
    // }
}
watchEffect(() => {
    if (props.PidialogFormVisible) {
        getequipmentType()
    }
})
let equipmentTypeList = ref([])
async function getequipmentType() {
    let res = await equipmentType()
    console.log(res);
    equipmentTypeList.value = res.data
}
let formDataList = ref([
    {
        equipmentName: '',
        equipmentNumber: '',
        equipmentModel: '',
        equipmentType: '',
        inventoryStatus: ''
    }
])
let tabnum = ref(1)
function addTab() {
    formDataList.value.push({
        equipmentName: '',
        equipmentNumber: '',
        equipmentModel: '',
        equipmentType: '',
        inventoryStatus: ''
    })
    tabnum.value++
}
// 删除一条表单
function removeTab() {
    if (formDataList.value.length > 1) {
        formDataList.value.pop()
        tabnum.value--
    }
}
let formRef = ref(null)
async function addsubmit() {
    console.log(formDataList.value)
    const hasInvalidItem = formDataList.value.some(item => {
        return item.equipmentName == '' ||
            item.equipmentNumber == '' ||
            item.equipmentType == null ||
            item.inventoryStatus == null;
    });
    console.log(hasInvalidItem);
    
    if (hasInvalidItem) {
        ElMessage.error("Please fill in the complete information of the incoming equipment")
        return;
    }
    let res = await batchAddInventory(formDataList.value)
    console.log(res);
    if (res.code == 200) {
        ElMessage.success(res.msg)
        colseclose()
    }


}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="PidialogFormVisible" style="padding: 40px;width: 1200px;" title="Ratch put in storage"
            @close="colseclose">
            <el-icon size="30" @click="addTab">
                <Plus />
            </el-icon>
            <el-form :model="formDataList" ref="formRef" class="two-column-form">
                <div class="one" v-for="(item, index) in formDataList" :key="index">
                    <!-- 设备名称 -->
                    <div class="select">
                        <el-input v-model="item.equipmentName" class="inp" style="width: 220px"
                            placeholder="Enter equipmentName">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>
                    <!-- 设备编号 -->
                    <div class="select">
                        <el-input v-model="item.equipmentNumber" class="inp" style="width: 220px"
                            placeholder="Enter equipmentNumber">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>
                    <!-- 设备型号 -->
                    <div class="select">
                        <el-input v-model="item.equipmentModel" autocomplete="off"
                            placeholder="Please input equipmentModel" style="width: 220px;" />
                    </div>
                    <!-- 设备类型 -->
                    <div class="select">
                        <el-select style="width: 180px" placeholder="please select equipmentType" v-model="item.equipmentType">
                            <el-option :label="item.name" :value="item.number" v-for="item in equipmentTypeList" />
                        </el-select>
                    </div>
                    <!-- 状态 -->
                    <div class="select">
                        <el-select style="width: 180px" placeholder="please select inventoryStatus" v-model="item.inventoryStatus">  
                            <el-option label="New_State" :value="0" />
                            <el-option label="Maintenance_State" :value="1" />
                            <el-option label="Return_State" :value="2" />
                        </el-select>
                    </div>
                    <el-icon @click="removeTab">
                        <CircleClose />
                    </el-icon>
                </div>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="colseclose">cancel</el-button>
                    <el-button type="primary" @click="addsubmit(formRef)">
                        sure
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
.one {
    display: flex;
    margin: 10px 0;
    align-items: center;

    .select {
        margin-right: 10px;
    }
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .one {
        flex-direction: column;


        .select {
            width: 100%;
        }
    }

    // .address-container {
    //     flex-direction: column;
    //     align-items: flex-start;

    //     .el-select {
    //         width: 100% !important;
    //         margin-right: 0 !important;
    //         margin-bottom: 10px;
    //     }
    // }
}
</style>